<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>发布任务</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <link rel="stylesheet" href="./css/push.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
	<script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
</head>
<body>
    <div id="app" v-cloak :style="{'margin-bottom':'calc(' + api.safeArea.bottom + 'px + 1rem)'}">
        <div>
            <div class="headTaskType disbox">
                <h3 class="disflex ell">
                    类型：
                    {{tpLink.title}}
                    - 
                    {{tpLink.name}}
                </h3>
            </div>
            <div class="inputContent">
                <div class="blocks"
                    v-if="isInputTitle"
                >
                    <h3>任务标题<font color="#F30"> *</font></h3>
                    <input type="text" placeholder="请输入悬赏任务的标题"
                        v-model="userInput.title"
                    />
                </div>
                <div class="blocks">
                    <h3>单价(元)<font color="#F30"> *</font></h3>
                    <input type="number" :placeholder="minAmountText" 
                        v-model="userInput.price"
                    />
                </div>
                <div class="blocks">
                    <h3>数量<font color="#F30"> *</font></h3>
                    <input type="number" :placeholder="minNumText"
                        v-model="userInput.num"
                    />
                </div>
            </div>
            <template
                v-if="mode !== 'system'"
            >
                    <div class="flex u-mode">
                        <div class="flexItemCenter mr30 _warp"
                            :class="{'_at_wrap': mode === 'simple'}"
                            @click="changeMode('simple')"
                        >
                            <span class="dt_ico"></span>
                            <span>简易模式</span>
                        </div>
                        <div class="flexItemCenter mr30 _warp"
                            :class="{'_at_wrap': mode === 'major'}"
                            @click="changeMode('major')"
                        >
                            <span class="dt_ico"></span>
                            <span>自定义模式</span>
                        </div>
                    </div>
            </template>
        </div>
        <div id="footer" :style="{'padding-bottom':api.safeArea.bottom + 'px'}">
			<div class="buttonFooter disbox fixed-btn">
			    <div class="left ell disflex">
			        预计花费
			        <font>
			            {{totalSpendPrice}}
			        </font>元
			    </div>
			    <div class="right"
			        @click="JumpPage"
			    >下一步（1/2）</div>
			</div>
		</div>
        <template v-if="isPageLoading">
            <div class="loadFull whiteBg pageload">
                <div class="se-loading"></div>
            </div>
        </template>
    </div>
    <script>
		apiready = function() {
		    var app = new Vue({
		        el:'#app',
		        data() {
		            return {
		                // 主题信息
		                tpLink: {
		                    id: '',
		                    title: '',
		                    name: '',
		                    minAmount: 0,
		                    minNum: 0
		                },
		                userInput: {
		                    title: '',
		                    price: '',
		                    num: ''
		                },
		                // 模式 major 自定义 simple 简单  system 系统
		                mode: 'simple',
		                device:[
		                    {id:1,title:'安卓',img:'../../../image/push/android.png',
		                        isSelect: true,value: 'Android'
		                    },
		                    {id:2,title:'苹果',img:'../../../image/push/apple.png',
		                        isSelect: true,value: 'iOS'
		                    },
		                ],
		                isInputTitle: true,
		                isPageLoading: true,
		                pushWran: '',
		                iosTest:false,
		                balance: 0,
		            }
		        },
		        computed: {
		            totalSpendPrice() {
		                var userInput = this.userInput;
		                var price = userInput.price || 0;
		                var num = userInput.num || 0;
		                return Number(price * num).toFixed(2);
		            },
		            minAmountText() {
		                var minAmount = this.tpLink.minAmount;
		                return '给用户的佣金,至少'+ $.parsePrice(minAmount,2) + '元';
		            },
		            minNumText() {
		                var minNum = this.tpLink.minNum;
		                return '需要发布多少个任务,至少'+ minNum + '个';
		            }   
		        },
		        created() {
		            this.init();
		        },
		        mounted(){
					$.initJs(this);
		        },
		        methods:{
		            init() {
		                // this.fetchUserInfo();
		                var params = this.getPageParam().data;
		                this.setTplink(params);
		                this.getSystemTemplateAPI();
		                this.checkInputTaskTitle();
		                this.onPublishTip(params.tipsKey, params.publishTips);
		            },
		            /*
		            * 获取页面传递参数
		            */
		            getPageParam: function() {
		                return api.pageParam;
		            },
		            setTplink: function(params) {
		                this.tpLink =  {
		                    id: params.tpid,
		                    title: params.titles,
		                    name: params.name,
		                    minAmount: params.minAmount,
		                    minNum: params.minNum
		                }
		            },
		            changeMode: function(type) {
		                this.mode = type;
		            },
		            getSystemTemplateAPI: function() {
		                let _self = this;
		                $.comRequest('get','/task/project/template',{
		                    tp_id: this.tpLink.id
		                },function(res){
		                    var data = res.data;
		                    var template = data.template;
		                    if ( template !== null && typeof template === 'object') {
		                        _self.mode = 'system';
		                    }
		                    // if (data.publish_tip) {
		                    //     _self.lookOverWarn(data.publish_tip);
		                    // }
		                    _self.isPageLoading = false;
		                },function(ero){
		                    _self.isPageLoading = false;
		                    $.toast(ero.message);
		                });
		            },
		            JumpPage(){
						var _self = this;
		                var tpLink = this.tpLink;
		                var userInput = this.userInput;
		                if(userInput.title=='' && this.isInputTitle){
		                    $.toast('请填写任务标题');
		                    return;
		                }
		                if (userInput.price==''){
		                    $.toast('请填写单价');
		                    return;
		                }
		                if (Number(userInput.price) < $.parsePrice(tpLink.minAmount,2)) {
		                    $.toast('单价不能低于' + $.parsePrice(tpLink.minAmount,2)+'元');
		                    return;
		                }
		                if (userInput.num == ''){
		                    $.toast('请填写数量');
		                    return;
		                }
		                if (Number(userInput.num) < tpLink.minNum) {
		                    $.toast('任务数量不能小于' + tpLink.minNum);
		                    return;
						}
						
						// 判断余额
						$.ajax({
		                    url: '/user/summary',
		                    method: 'get',
							load:true,
		                    success: function(res){
								_self.balance = res.data.balance.balance;
								if (parseFloat(_self.balance) < $.yuanToSys(_self.totalSpendPrice)) {
									$.confirm({
										msg: '余额不足,需要跳转到充值页面吗?',
										buttons: ['取消', '确定'],
										success: function() {
											$.openUrl('common/commonTitle','my/wallet_recharge',{title:'充值'})
										}
									});
									return;
								}
								$.openUrl('common/commonTitle','push/definite',{
									title: '发布任务',
									tpid: tpLink.id,
									titles: userInput.title,
									mode: _self.mode,
									price: userInput.price,
									num: userInput.num,
									allowEdit:true,
									typeTitle: tpLink.title,
									typeName: tpLink.name
								});
		                    },
		                    error:function(ero){
		                        $.toast(ero.message);
		                    }
		                });
		                
						
		                
		            },
		            checkInputTaskTitle: function () {
		                var project = $.handleLocalStorage.get('pushProject');
		                if (project.is_allow_custom_title == 1) {
		                    this.isInputTitle = true;   
		                }else{
		                    this.isInputTitle = false;
		                }
		            },
		            lookOverWarn: function (text) {
		                $.confirm({
		                    title: '提示',
		                    msg: text,
		                    buttons: ['取消','不再提示'],
		                    success:function(){
		                        publishApi();
		                    }
		                });
		            },
		            onPublishTip: function(key, tips){
		                if(tips == null || tips.trim() == ''){
		                    return false;
		                }
		                var cacheKey = 'publishTips';
		                var tipsKey = md5(key+tips).substr(0,10);
		                var caches = JSON.parse($.prefs.getItem(cacheKey)) || {};
		                if(caches[tipsKey] == 1){
		                    return false;
		                }
		
		                $.confirm({
		                    msg: tips,
		                    buttons: ['知道了', '不再提示'],
		                    success: function(){
		                        caches[tipsKey] = 1;
		                        $.prefs.setItem(cacheKey, JSON.stringify(caches));
		                    }
		                });
		            },
		        },
		    });
		}
	</script>
</body>
</html>
